<template>
  <div class="home">
    <a-affix :offset-top="10" v-if="global.affixSearch.value">
      <div class="search">
        <span><a-avatar class="avatar" shape="square" :src="gege" /></span>
        <a-typography-title :level="5" style="white-space: nowrap; margin: 10px"
          >{{ global.Title }}
        </a-typography-title>
        <a-input-search
          v-model:value="searchText"
          placeholder="Input Search Text"
          enter-button="Search"
          size="default"
          @search="onSearch"
        />
        <MyHander></MyHander>
      </div>
    </a-affix>
    <div class="search" v-else>
      <span><a-avatar class="avatar" shape="square" :src="gege" /></span>
      <a-typography-title :level="5" style="white-space: nowrap; margin: 10px"
        >{{ global.Title }}
      </a-typography-title>
      <a-input-search
        v-model:value="searchText"
        placeholder="Input Search Text"
        enter-button="Search"
        size="default"
        @search="onSearch"
      />
      <MyHander></MyHander>
    </div>
    <a-tabs class="tabs" v-model:activeKey="activeKey" @change="noTabchange">
      <a-tab-pane class="tab" key="1" :tab="tabs.post">
        <PostList :post-list="postList" :pagination="pagination" />
      </a-tab-pane>
      <a-tab-pane class="tab" key="2" :tab="tabs.user">
        <UserList :user-list="userList" />
      </a-tab-pane>
      <a-tab-pane class="tab" key="3" :tab="tabs.code">
        <CodeList :code-list="codeList" />
      </a-tab-pane>
      <a-tab-pane class="tab" key="4" :tab="tabs.picture">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
      <a-tab-pane class="tab" key="5" :tab="tabs.video">
        <VideoList :video-list="videoList" />
      </a-tab-pane>
      <a-tab-pane class="tab" key="6" :tab="tabs.music">
        <MusicList :music-list="musicList" />
      </a-tab-pane>
    </a-tabs>

    <MyFooter></MyFooter>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios";
import { message } from "ant-design-vue";
import gege from "@/assets/gege.jpg";
import PostList from "@/components/List/PostList.vue";
import PictureList from "@/components/List/PictureList.vue";
import UserList from "@/components/List/UserList.vue";
import VideoList from "@/components/List/VideoList.vue";
import CodeList from "@/components/List/CodeList.vue";
import MusicList from "@/components/List/MusicList.vue";
import MyHander from "@/components/Index/Hander.vue";
import MyFooter from "@/components/Index/Footer.vue";

import global from "@/types/global";

const router = useRouter();
const route = useRoute();

let activeKey = "1";
const current = ref(6);
const pagination = {
  current: 1,
  pageSize: 20,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
};

const postList = ref([]);

const codeList = ref([]);

const userList = ref([]);

const pictureList = ref([]);

const videoList = ref([]);

const musicList = ref([]);

const loadTypeData = (Params: any) => {
  const type = route.params.category;
  if (!type) {
    message.error("类型为空");
    return;
  }
  const postQuery = {
    ...Params,
    type: type,
    searchText: Params.text,
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
  };
  myAxios.post("search/page/all", postQuery).then((res: any) => {
    const list = res.objectPage.records;
    // alert(type)
    if (type === "post") postList.value = list;
    else if (type === "user") userList.value = list;
    else if (type === "picture") pictureList.value = list;
    else if (type === "video") videoList.value = list;
    else if (type === "code") codeList.value = list;
    else if (type === "music") musicList.value = list;
    pagination.total = res.objectPage.total
    // // pagination.
  });
};

const initsearchParams = {
  type: route.params.category,
  text: "",
};

// loadTypeData(initsearchParams);

const searchParams = ref(initsearchParams);
const searchText = ref(route.query.text);
watchEffect(() => {
  searchParams.value = {
    text: route.query.text,
    type: route.params.category,
  } as any;
  loadTypeData(searchParams.value);
});

const onSearch = () => {
  searchParams.value.text = String(searchText.value);
  router.push({
    query: searchParams.value,
  });
  loadTypeData(searchParams.value);
};

//
const tabs = {
  post: "文章",
  video: "视频",
  picture: "图片",
  code: "代码",
  user: "用户",
  music: "音乐",
};

const x = ["post", "user", "code", "picture", "video", "music"];

const noTabchange = (key: string) => {
  searchParams.value.type = key;

  router.push({
    path: `/search/${x[parseInt(key) - 1]}`,
    query: searchParams.value,
  });
  document.title = "聚合搜索-" + eval("tabs." + x[parseInt(key) - 1]);
};

if (document.title === "aggregatiensearch") {
  const type = route.params.category;
  document.title = "聚合搜索-" + eval("tabs." + type);
}
const setKey = () => {
  const type = String(route.params.category);
  activeKey = x.indexOf(type) + 1 + "";
};
onBeforeMount(() => {
  setKey();
});
</script>

<style scoped lang="less">
.home {
  .search {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 50px;

    .title {
      margin-left: 10px;
      font-weight: 900;
      width: 180px;
    }
  }

  .tabs {
    .tab {
      display: flex;
      justify-content: center;
      min-height: calc(100vh - 200px);

      .div {
        width: 100%;
      }
    }
  }
}
</style>
